<template>
  <div id="app">
    <Header />
    <div class="app-center">
        <Goods
            v-for="(item, index) in goodsList" :key="item.id"
            :id="item.id"
            :description="item.description"
            :price="item.price"
            :num="item.num"
            :state="item.state"
            :image="item.image"
            @stateChange="stateChange"
        >
          <template #count>
            <Count :num="item.num" @numChangeEvent="numChangeHandler($event, item.id)"></Count>
          </template>
        </Goods>
    </div>
<!--   start: test Watch api used-->
    <div>
      <p>{{ act }}</p>
      <button @click="addAct">按钮</button>
    </div>
<!--    end: -->
    <Footer
        :isFull="fullState"
        @fullStateEvent="fullStateChange"
        :total="totalPrice"
        :totalNum="totalNum"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import Goods from './components/Goods.vue';
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import GoodsType from "@/goods.type"
import bus from '@/utils/EventBus'
import Count from "@/components/Count.vue";

import { getGoodsListApi } from '@/api/goods'

@Component({
  components: {
    Footer,
    Header,
    Goods,
    Count
  },
})
export default class App extends Vue {

    /* data */
    private goodsList: Array<GoodsType>|null = [];
    private act: number = 0;

    /* lifeCycle */
     created() {
        this.getGoodsList()
        // bus.$on('numChangeEvent', this.setItemNum);
     }

    /* methods */
    async getGoodsList() {
        const { data: { list } } = await getGoodsListApi();
        this.goodsList = list;
    }
    stateChange(data: any) {
         const currentGoods: GoodsType | undefined = this.goodsList?.find(item => item.id === data.id);
         currentGoods && (currentGoods.state = data.state);

       /* this.goodsList?.some(item => {
            if(item.id === data.id) {
                item.state = data.state;
                return true
            };
        })*/
    }
    //切换全选状态
    fullStateChange(check: boolean) {
        this.goodsList?.forEach(item => item.state = check);
    }
    //改变商品数量的回调
    setItemNum(data: any) {
        this.goodsList?.some(item => {
            if(item.id === data.id) {
                item.num = data.val;
                return true;
            }
        })
    }
    numChangeHandler(e:number, id: number) {
        this.goodsList?.some(item => {
            if(item.id === id) {
                item.num = e;
                return true;
            }
        })
    }
    //测试watch功能的方法
    addAct() {
        this.act++;
    }



    /* computed 计算属性前加get */
    get fullState(): boolean {
        return this.goodsList?.every(item => item.state) || false;
    }
    get totalPrice(): number {
        const total: number = this.goodsList?.filter(item => item.state).reduce((previousVal, cur) => previousVal += cur.price * cur.num, 0) || 0;
        return parseFloat((total / 100 ).toFixed(2))
    }
    get totalNum(): number {
        return this.goodsList?.filter(item => item.state).reduce((previce, item) => previce += item.num, 0) ?? 0;
    }

    /* Watch */
    //Watch装饰器中传入需要侦听的变量, 当变量值发生改变, 触发 actChange 事件调用
    @Watch('act')
    actChange(newVal: number, oldVal: number) {
        if(newVal !== oldVal) {
            console.log(newVal)
        }
    }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  overflow: auto;
  p {
    margin: 0;
    padding: 0;
  }
  body {
    margin: 0;
    padding: 0;
  }
  .app-center {
    padding: 40px 0;
  }
}
</style>
